<template>
  <u-tabbar
    zIndex="3"
    :value="checkedValue"
    :fixed="false"
    :placeholder="false"
    activeColor="#d81e06"
    @change="changeValue"
    :safeAreaInsetBottom="false"
  >
    <u-tabbar-item
      v-for="(item, index) of tabBarList1"
      :key="index"
      :text="item.text"
      :name="item.key"
      @click="changeTabBarItem(item)"
    >
      <u-image
        width="20"
        height="20"
        class="u-page__item__slot-icon"
        slot="active-icon"
        :src="item.selectedIconPath"
      ></u-image>
      <u-image
        width="22"
        height="22"
        class="u-page__item__slot-icon"
        slot="inactive-icon"
        :src="item.iconPath"
      ></u-image>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    tabBarList: {
      type: Array,
      default: uni.getStorage({
        key: 'tabBarList',
        success: function (res) {},
      }),
    },
  },
  data() {
    return {
      borderTop: true,
      activeColor: '#909399',
      inactiveColor: '#328CFA',
    }
  },
  computed: {
    tabBarList1(item) {
      return this.$store.state.tabBarList
    },
    checkedValue(item) {
      return this.$store.state.checkedValue
    },
  },
  onLoad() {},
  methods: {
    ...mapMutations(['setCheckedValue']),
    changeValue(value) {},
    changeTabBarItem(item) {
      this.setCheckedValue(item.key)
      uni.switchTab({
        url: item.pagePath,
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
